Axios 是一个流行的基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。拦截器（Interceptors）是 Axios 提供的一个强大功能，允许你在请求或响应被处理之前拦截它们，以便添加一些自定义逻辑。

请求拦截器

请求拦截器在请求被发送到服务器之前拦截它。你可以在这里添加认证 token、设置默认请求头等等。

响应拦截器

响应拦截器在服务器响应到达客户端之前拦截它。你可以在这里处理错误响应、统一处理数据格式等等。

使用示例

以下是如何在 Axios 中使用请求和响应拦截器的示例：

const axios = require('axios');

// 创建一个 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 例如，添加认证 token
    const token = 'your-auth-token';
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    // 例如，统一处理数据格式
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    // 例如，处理状态码为4xx或5xx的错误
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未授权，重定向到登录页面
          console.error('未授权，请登录');
          break;
        case 403:
          // 禁止访问
          console.error('禁止访问');
          break;
        case 404:
          // 请求的资源不存在
          console.error('请求的资源不存在');
          break;
        // 其他错误处理
        default:
          console.error('其他错误', error.response.status);
      }
    }
    return Promise.reject(error);
  }
);

// 使用实例发送请求
instance.get('/some-endpoint')
  .then(response => {
    console.log('响应数据:', response);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

注意事项

1. 多个拦截器：你可以添加多个请求和响应拦截器，它们会按照添加的顺序执行。
2. 错误处理：在响应拦截器中，一定要返回 Promise.reject(error) 以确保错误能被后续的错误处理机制捕获。
3. 全局 vs 实例：你可以为全局的 Axios 对象添加拦截器，也可以为某个 Axios 实例添加拦截器。通常，建议为实例添加拦截器以保持代码的模块化和清晰。

通过合理使用 Axios 拦截器，你可以简化请求和响应的处理逻辑，使代码更加整洁和易于维护。